<template>
  <!-- :data="tables"  //仅模糊搜索功能 -->
  <!-- :data="tables.slice((pageIndex-1)*pageSize,pageIndex*pageSize)"   // 前端分页关键 -->
  <div>
    <!-- <template v-for="(item,index) in configdata.body.thead">{{index}}</template> -->
    <el-table
      v-loading="listLoading"
      element-loading-text="Loading"
      highlight-current-row
      :data="tables"
      :height="configdata.body.tstyle.height"
      :size="configdata.body.tstyle.size"
    >
      <template v-for="(item,index) in configdata.body.thead">
        <!-- 字段显示与隐藏 -->
        <template v-if="!item.hidden">
          <el-table-column
            :key="index"
            :label="item.title[currentLang]"
            :width="item.width?item.width:null"
            align="center"
          >
            <template slot-scope="scope">
              <!-- 操作列按钮 -->
              <template v-if="item.iscommand">
                <template v-for="(item,index) in item.btnlist">
                  <el-button
                    :key="index"
                    :type="item.type"
                    size="mini"
                    @click="fieldhandleClick(scope.$index, scope.row,item.component,item.name[currentLang],item)"
                    v-html="item.name[currentLang]"
                  ></el-button>
                </template>
              </template>

              <template v-else>
                <!-- 是否计数 -->
                <template v-if="item.template.count">
                  <el-badge :value="scope.row[item.field]" class="item">
                    <!-- 统一图标样式 -->
                    <template v-if="item.template.__all">
                      <el-button
                        :type="item.template.__all.type"
                        :icon="item.template.__all.icon"
                        circle
                        size="mini"
                        @click="fieldhandleClick(scope.$index, scope.row,item.template.component,item.title[currentLang])"
                      ></el-button>
                    </template>

                    <!-- 根据解析具体值对应图标样式 -->
                    <template
                      v-else-if="item.template.type&&item.template.type[scope.row[item.field]]"
                    >
                      <el-button
                        :type="item.template.type[scope.row[item.field]].type"
                        :icon="item.template.type[scope.row[item.field]].icon"
                        circle
                        size="mini"
                        @click="fieldhandleClick(scope.$index, scope.row,item.template.component,item.title[currentLang])"
                      >1</el-button>
                    </template>
                  </el-badge>
                </template>

                <!-- 不计数 -->
                <template v-else>
                  <!-- 统一图标样式 -->
                  <template v-if="item.template.__all">
                    <el-button
                      :type="item.template.__all.type"
                      :icon="item.template.__all.icon"
                      circle
                      size="mini"
                      @click="fieldhandleClick(scope.$index, scope.row,item.template.component,item.title[currentLang])"
                    ></el-button>
                  </template>

                  <!-- 根据解析具体值对应图标样式 -->
                  <template
                    v-else-if="item.template.type&&item.template.type[scope.row[item.field]]"
                  >
                    <el-button
                      :type="item.template.type[scope.row[item.field]].type"
                      :icon="item.template.type[scope.row[item.field]].icon"
                      circle
                      size="mini"
                      @click="fieldhandleClick(scope.$index, scope.row,item.template.component,item.title[currentLang])"
                    ></el-button>
                  </template>
                </template>

                <!-- 显示文本 -->
                <span
                  v-if="item.template.text == 'show'"
                  @click="fieldhandleClick(scope.$index, scope.row,item.template.component,item.title[currentLang])"
                  v-html="scope.row[item.field]"
                ></span>

                <!-- 显示下划线文本 -->
                <template v-else-if="item.template.text == 'underline'">
                  <span
                    v-if="item.template.component"
                    @click="fieldhandleClick(scope.$index, scope.row,item.template.component,item.title[currentLang])"
                  >
                    <a
                      style="text-decoration: underline;"
                      href="javascript:;"
                    >{{scope.row[item.field]}}</a>
                  </span>
                  <span v-else>
                    <a
                      style="text-decoration: underline;"
                      :href="scope.row[item.field]"
                      target="_blank"
                    >{{scope.row[item.field]}}</a>
                  </span>
                </template>
              </template>
            </template>
          </el-table-column>
        </template>
      </template>
    </el-table>
    <el-dialog
      v-dialogDrag
      :title="currentDialogTitle"
      :visible.sync="dialogComponentVisible"
      :close-on-click-modal="false"
      :show-close="true"
      width="100%"
      :fullscreen="true"
      class="dialog"
    >
      <div class="el-dialog-div">
        <!-- 接受子组件的消息sonToFather -->
        <component :fdata="toChildObj" :is="currentDialogComponent" @sonToFather="zidingyi($event)"></component>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import '@/common/js/directives.js'
export default {
  name: 'tplTable',
  props: ['fdata'],
  data () {
    return {
      publicComponentObj: {
        confirmConfig: {},
        msgConfig: {}
      },
      currentLang: 'ch',
      currentDialogTitle: '',
      currentDialogComponentName: '',
      dialogComponentVisible: false,
      toChildObj: {},
      listLoading: false,
      tableConIcon: {
        success: { type: 'success', icon: 'el-icon-check', count: 1 }, //, text: "已配置"
        warning: { type: 'warning', icon: 'el-icon-edit', count: 1 }, // text: "未配置完整"
        none: { type: 'info', icon: 'el-icon-minus', count: 1 }, //, text: "无需配置"
        add: { type: 'success', icon: 'el-icon-plus', count: 1 }, //, text: "添加"
        house: { type: 'primary', icon: 'el-icon-house', count: 1 } //, text: "家"
      },
      configdata: null,
      search: '', // 表格模糊搜索关键字
      pageSize: 5, // 每页大小默认值
      pageIndex: 1 // 默认第一页
    }
  },
  watch: {
    // 检测表格数据过滤变化，自动跳到第一页
    tables () {
      // this.pageIndex = 1;
    }
  },
  created () {
    this.configdata = this.fdata
  },
  computed: {
    // 决定当前弹出窗口的组件
    currentDialogComponent () {
      if (this.currentDialogComponentName) {
        this.dialogComponentVisible = true
        console.log(
          '打开的组件页面是',
          `./${this.currentDialogComponentName}.vue`,
          location.href
        )
        return () => import(`./${this.currentDialogComponentName}.vue`)
      } else {
        this.dialogComponentVisible = false
        //  return () => import(`./nofind.vue`);
      }
    },
    // 表格模糊搜索
    tables () {
      if (!this.configdata) return []
      // 父页面传来的表格数据
      var returnArray = this.configdata.body.tlist
      // do模糊搜索
      returnArray = this.tableToFuzzySearch(returnArray)
      // do分页
      returnArray = this.tableToPaging(returnArray)
      return returnArray
    },
    // 表格总条数
    total () {
      // return this.tables.length;
      if (!this.configdata) return
      return this.tableToFuzzySearch(this.configdata.body.tlist).length
    }
  },
  methods: {
    // 关闭弹窗
    changeFdata () {
      this.$emit('sonToFather', { closeDialog: true }) // 向父组件通知--关闭弹窗体
    },
    zidingyi (obj) {
      if (obj) {
        // 关闭弹窗体
        if (obj.closeDialog) {
          this.dialogComponentVisible = false
          this.changeFdata()
        }
      }
    },
    clicktype_copy: function (filed) {
      var _this = this
      this.$copyText(filed).then(
        function (e) {
          var tempMsgObj = {
            message: '复制成功',
            type: 'success',
            showClose: true,
            duration: 3000
          }
          _this.publicComponentObj.msgConfig = tempMsgObj
        },
        function (e) {
          var tempMsgObj = {
            message: '复制失败',
            type: 'error',
            showClose: true,
            duration: 3000
          }
          _this.publicComponentObj.msgConfig = tempMsgObj
        }
      )
    },
    // 表格字段点击
    // index: 表格行id（0开始）、
    // row: 行信息对象
    // componentname: 前往的组件名字
    // dialogtitle: 字段显示名或按钮名字、（只有行操作按钮才有的 配置：前往的组件名字、按钮名字、按钮样式类型）
    // hash: componentname.split("#")[1];
    fieldhandleClick (index, row, componentname, dialogtitle, item) {
      if (item) {
        console.log('', index, row, componentname, dialogtitle, item)
        // 复制
        if (item.clicktype == 'copy') {
          this.clicktype_copy(row[item.clicksouce])
        }
        // 跳转
        if (item.clicktype == 'jump') {
          window.open(row[item.clicksouce])
        }
      }
      // 点击后弹窗打开某组件
      if (componentname) {
        console.log('', index, row, componentname, dialogtitle, item)
        // 传递参数给子组件
        this.toChildObj.index = index
        this.toChildObj.row = row
        this.toChildObj.componentname = componentname
        this.toChildObj.dialogtitle = dialogtitle
        this.toChildObj.hash = componentname.split('#')[1]
        // 先清空才能重复点击时会弹窗
        this.currentDialogComponentName = ''
        this.currentDialogComponentName = componentname.split('#')[0] // dialog中的组件
        this.currentDialogTitle = dialogtitle // dialog标题
      }
    },
    // 表格每页大小默认值
    handleSizeChange (val) {
      this.pageSize = val
    },
    // 表格去到第几页
    handleCurrentChange (val) {
      this.pageIndex = val
    },
    tableToFuzzySearch (tabledata) {
      var returnArray = tabledata
      // 开启模糊搜索
      if (this.configdata.body.switchOfFuzzySearch) {
        const search = this.search
        if (search) {
          // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
          // 注意： filter() 不会对空数组进行检测。
          // 注意： filter() 不会改变原始数组。
          returnArray = returnArray.filter(data => {
            // some() 方法用于检测数组中的元素是否满足指定条件;
            // some() 方法会依次执行数组的每个元素：
            // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
            // 如果没有满足条件的元素，则返回false。
            // 注意： some() 不会对空数组进行检测。
            // 注意： some() 不会改变原始数组。
            return Object.keys(data).some(key => {
              return (
                String(data[key])
                  .toLowerCase()
                  .indexOf(search) > -1
              )
            })
          })
        }
      }
      return returnArray
    },
    tableToPaging (tabledata) {
      var returnArray = tabledata
      if (this.configdata.body.switchOfPaging) {
        returnArray = returnArray.slice(
          (this.pageIndex - 1) * this.pageSize,
          this.pageIndex * this.pageSize
        )
      }
      return returnArray
    }
  }
}
</script>